
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件详解二</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#div1{
				width:300px;
				height:60px;
				margin: 100px auto;
				background-color:red;
				border:2px solid blue;
				color:black;
				font-weight:bolder;
				text-align:center;
				line-height:60px;
				cursor:pointer;
			}
		</style>
		<script type="text/javascript">
			/* 
			 事件对象当中常用的属性:
			 1,e.clientX
			 鼠标距离当前浏览器(可视区域)左边距
			 
			 2,e.clientY
			 鼠标距离当前浏览器(可视区域)右边距
			 
			 3,e.offsetX
			 鼠标距离事件源左边距
			 
			 4,e.offsetY
			 鼠标距离事件源左边距
			 
			 5,e.pageX
			 鼠标距离当前浏览器左边距
			 
			 6,e.pageY
			 鼠标距离当前浏览器右边距
			 */
			window.onload = function(){
				var oDiv = document.getElementById("div1");
				oDiv.onclick = function(e){
					var evt = e||event
					console.log(evt.clientX,evt.clientY);
					
					console.log(evt.pageX,evt.pageY);
			
					console.log(evt.offsetX,evt.offsetY);
				
					

				}
			}
		</script>
	</head>
	<body>
		<div id="div1"> Hello World!!! My Name Is Wuhao </div>
	</body>
</html>
